<template>
  <el-dialog id="dip-login" :visible.sync="dialogVisible" @closed="clearDialog">
    <div class="login-box">
      <div class="login-animate" :class="{ 'username-animate': isUserNameFocus, 'password-animate': isPasswordFocus }">
        <div class="left-ear" :style="{ left: getPosition(1.5, -1, 1) }"></div>
        <div class="right-ear" :style="{ left: getPosition(7.5, -1, 1) }"></div>
        <div class="head">
          <div class="left-eye" :class="{ doe: isDoe }" :style="{ left: getPosition(0.5, 1, 1.5) }"></div>
          <div class="right-eye" :class="{ doe: isDoe }" :style="{ left: getPosition(4, 1, 2) }"></div>
          <div class="face" :style="{ left: getPosition(1, 1, 1.5) }">
            <div class="nose" :style="{ left: getPosition(0.9, 1, 1) }"></div>
            <div class="mouth" :class="{ show: isPwdShow, doe: isDoe }"></div>
          </div>
        </div>
        <div class="body"></div>
        <div class="left-arm" :class="{ show: isPwdShow }"></div>
        <div class="right-arm" :class="{ show: isPwdShow }"></div>
      </div>
      <el-form :model="ruleForm" ref="ruleForm" label-position="top" @keydown.enter.native="submitForm">
        <el-form-item prop="username" :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]">
          <el-input
            v-model="ruleForm.username"
            placeholder="Username"
            @blur="isUserNameFocus = false"
            @focus="focusUsername"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
          <el-input
            v-model="ruleForm.password"
            :type="isPwdShow ? 'text' : 'password'"
            placeholder="Password"
            @blur="isPasswordFocus = false"
            @focus="focusPassword"
          >
            <i
              slot="suffix"
              :class="[isPwdShow ? 'el-icon-minus' : 'el-icon-view']"
              autocomplete="auto"
              @click="isPwdShow = !isPwdShow"
            />
          </el-input>
        </el-form-item>
        <el-form-item
          v-if="showCode"
          prop="code"
          class="code-box"
          :rules="[{ required: true, message: '验证码不能不为空', trigger: 'blur' }]"
        >
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input @blur="blurCaptcha" v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
            </el-col>
            <el-col :span="12">
              <div class="code" @click="refreshCaptcha">
                <img :src="imgCaptchaSrc" />
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="error-box">
          <p class="errorMsg">{{ errorMsg }}</p>
        </div>
      </el-form>
      <div class="login-btn">
        <span class="login-btn-register" @click="clickRegister">注册</span>
        <el-button type="primary" @click="submitForm" class="login-button">登录</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isUserNameFocus: false,
      isPasswordFocus: false,
      isPwdShow: false,
      showCode: false,
      imgCaptchaSrc: '',
      ruleForm: {
        username: '',
        password: '',
        code: ''
      },
      errorMsg: ''
    }
  },
  watch: {
    '$store.state.user.init'() {
      // 退出登录，初始化数据
      if (!this.$store.state.user.init) {
        Object.assign(this.$data, this.$options.data.call(this))
      }
    }
  },
  computed: {
    isDoe() {
      return this.ruleForm.username.length >= 6
    }
  },
  methods: {
    focusUsername() {
      this.isUserNameFocus = true
      this.errorMsg = ''
    },
    focusPassword() {
      this.isPasswordFocus = true
      this.errorMsg = ''
    },
    focusCaptcha() {},
    blurCaptcha() {
      console.log('blur')
      this.errorMsg = ''
    },
    showDialog() {
      this.dialogVisible = true
    },
    // plusOrMinus -1向左移动，1向右移动，max可以理解为每次username变动移动的距离
    getPosition(init, plusOrMinus, max) {
      let leftLength = parseFloat((max / 36) * this.ruleForm.username.length)
      leftLength = leftLength > max ? max : leftLength
      return this.isUserNameFocus ? init + plusOrMinus * leftLength + 'em' : ''
    },
    submitForm() {
      this.errorMsg = ''
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$ajax({
            method: 'post',
            url: this.$ajax.setUrl('/admin/login'),
            data: this.$ajax.setData(this.getParams())
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$store.commit('user/updateInit', true)
              this.$store.commit('user/updateId', data.data.id)
              this.$store.commit('user/updateName', data.data.name)
              this.$store.commit('user/updateAvatarKey', data.data.avatar)
              this.dialogVisible = false
            } else {
              this.errorMsg = data.data || data.msg
              if (data.code === 401) {
                this.showCode = true
                this.refreshCaptcha()
              }
            }
          })
        }
      })
    },
    getParams() {
      let params = {
        username: this.ruleForm.username,
        password: this.ruleForm.password
      }
      if (this.ruleForm.code) {
        params.captcha = this.ruleForm.code
      }
      return params
    },
    clickRegister() {
      // 暂时无注册功能
      this.$message.warning('暂时无注册功能')
      return
    },
    clearDialog() {
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
      this.errorMsg = ''
    },
    refreshCaptcha() {
      this.imgCaptchaSrc = `${window.INIT_CONFIG['baseUrl']}/captcha?rad=${Math.random()}`
    }
  }
}
</script>

<style lang="scss">
#dip-login {
  .el-dialog {
    width: max-content;
    border-radius: 2em;
  }
  .el-form-item__content {
    width: 228px;
  }
  .error-box {
    position: relative;
    .errorMsg {
      color: #f56c6c;
      position: absolute;
      font-size: 12px;
      top: -14px;
    }
  }
  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 22em;
    border-radius: 10px;
    overflow: hidden;

    .el-form {
      margin-bottom: 14px;
    }

    .code-box {
      // margin-bottom: 5px;
      .code {
        height: 40px;
        border-radius: 5px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .login-btn {
      width: 100%;
      height: 5em;
      padding-left: 150px;
      box-sizing: border-box;
      line-height: 5em;
      background-color: #f7f7f7;
      .login-btn-register {
        color: #ccc;
        margin-right: 1em;
        cursor: not-allowed;
      }
    }
  }
  .login-animate {
    width: 10em !important;
    height: 10em !important;
    border-radius: 5em;
    background: #cefefb;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    div {
      transition: all 0.5s;
      -o-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
    }
    .body {
      background-image: url('~@/assets/img/login/body.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 6.5em;
      height: 6em;
      position: absolute;
      bottom: -2em;
      left: calc(50% - 3.25em);
      z-index: 0;
    }
    .head {
      position: relative;
      background-image: url('~@/assets/img/login/face.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 7.5em;
      height: 7.25em;
      position: absolute;
      bottom: 1em;
      left: calc(50% - 3.75em);
      z-index: 1;
    }
    .left-ear {
      background-image: url('~@/assets/img/login/left-ear.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 2em;
      height: 2em;
      position: absolute;
      bottom: 5.5em;
      left: calc(50% - 4em);
    }
    .right-ear {
      background-image: url('~@/assets/img/login/right-ear.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 2em;
      height: 2em;
      position: absolute;
      bottom: 5.5em;
      left: calc(50% + 2em);
    }
    .left-eye {
      background-image: url('~@/assets/img/login/eye.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 1em;
      height: 1em;
      position: absolute;
      bottom: 4em;
      left: calc(50% - 2.5em);
    }
    .right-eye {
      background-image: url('~@/assets/img/login/eye.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 1em;
      height: 1em;
      position: absolute;
      bottom: 4em;
      left: calc(50% + 1.5em);
    }
    .face {
      background-image: url('~@/assets/img/login/muzzle.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 4em;
      height: 4em;
      position: absolute;
      bottom: 0em;
      left: calc(50% - 2em);
    }
    .nose {
      background-image: url('~@/assets/img/login/nose.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 1em;
      height: 1em;
      position: absolute;
      top: 0.5em;
      left: calc(50% - 0.5em);
    }
    .mouth {
      background-image: url('~@/assets/img/login/mouth-smile.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 2em;
      height: 1em;
      position: absolute;
      bottom: 1em;
      left: calc(50% - 1em);
    }
    .left-arm {
      background-image: url('~@/assets/img/login/left-arm.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 3em;
      height: 7em;
      position: absolute;
      bottom: -7.5em;
      left: 1em;
      z-index: 2;
      transition: bottom 0.5s;
    }
    .right-arm {
      background-image: url('~@/assets/img/login/right-arm.png');
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      width: 3em;
      height: 7em;
      position: absolute;
      bottom: -7.5em;
      left: 6em;
      z-index: 2;
      transition: bottom 0.5s;
    }
  }
  .password-animate {
    .mouth.show {
      width: 1em;
      left: calc(50% - 0.5em);
      background-image: url('~@/assets/img/login/mouth-circle.png');
    }
    .left-arm.show {
      bottom: -1.7em !important;
    }
    .right-arm.show {
      bottom: -1.7em !important;
    }
    .left-arm {
      bottom: -0.5em;
    }
    .right-arm {
      bottom: -0.5em;
    }
  }
  .username-animate {
    .left-ear {
      left: 1.5em;
    }
    .right-ear {
      left: 7.5em;
    }
    .left-eye {
      left: 0.5em;
      bottom: 3.5em;
    }
    .left-eye.doe {
      background-image: url('~@/assets/img/login/eye-doe.png');
    }
    .right-eye.doe {
      background-image: url('~@/assets/img/login/eye-doe.png');
    }
    .right-eye {
      left: 4em;
      bottom: 3.5em;
    }
    .face {
      left: 1em;
    }
    .nose {
      left: 0.9em;
      top: 0.65em;
    }
    .mouth {
      bottom: 0.75em;
      background-image: url('~@/assets/img/login/mouth-half.png');
    }
    .mouth.doe {
      background-image: url('~@/assets/img/login/mouth-open.png');
      height: 2em;
      bottom: 0.5em;
    }
  }
}
</style>
